Implementering av verktygstips: Tillgänglig information vid hover och fokus

Verktygstips (tooltips) är små, kontextuella hjälpmeddelanden som visas när en användare för muspekaren över eller fokuserar på ett element. De kan ge ytterligare information, förtydliga syftet med ett element eller erbjuda tips om hur man använder en funktion. Verktygstips kan dock lätt bli en tillgänglighetsmardröm om de inte implementeras korrekt. Denna guide beskriver bästa praxis för att skapa verktygstips som är användbara för alla, inklusive användare med funktionsnedsättningar.

Varför tillgänglighet är viktigt för verktygstips

Tillgänglighet handlar inte bara om regelefterlevnad; det handlar om att skapa en bättre användarupplevelse för alla. När verktygstips inte är tillgängliga kan det exkludera användare som förlitar sig på hjälpmedelsteknik som skärmläsare, tangentbordsnavigering eller röstinmatning. Tänk på dessa scenarier:

• Skärmläsaranvändare: Om ett verktygstips inte är korrekt uppmärkt kanske en skärmläsare inte meddelar dess närvaro eller innehåll.
• Tangentbordsanvändare: Om ett verktygstips endast visas vid hover kommer tangentbordsanvändare inte att kunna komma åt det.
• Användare med motoriska funktionsnedsättningar: Precisa musrörelser som krävs för hover-interaktioner kan vara utmanande eller omöjliga.
• Användare med kognitiva funktionsnedsättningar: Ett dåligt timat eller förvirrande verktygstips kan skapa frustration och försvåra förståelsen.

Genom att följa bästa praxis för tillgänglighet kan vi säkerställa att verktygstips förbättrar snarare än försämrar användarupplevelsen för alla.

Nyckelprinciper för tillgängliga verktygstips

Följande principer är avgörande för att skapa tillgängliga verktygstips:

1. Erbjud alternativ åtkomst: Se till att verktygstips är tillgängliga via både hover och tangentbordsfokus.
2. Använd ARIA-attribut: Använd ARIA-attribut (Accessible Rich Internet Applications) för att korrekt identifiera och beskriva verktygstips för hjälpmedelsteknik.
3. Hantera fokus: Kontrollera vart fokus flyttas när ett verktygstips visas och döljs.
4. Säkerställ tillräcklig kontrast: Ge tillräcklig färgkontrast mellan verktygstipsets text och bakgrund.
5. Ge tillräckligt med tid: Ge användarna tillräckligt med tid att läsa innehållet i verktygstipset.
6. Gör dem avvisningsbara: Tillhandahåll ett tydligt sätt att avvisa verktygstipset.
7. Undvik överanvändning: Använd verktygstips sparsamt och endast när det är nödvändigt.

Implementeringstekniker

1. Använda hover och fokus

Den mest kritiska aspekten av tillgängliga verktygstips är att säkerställa att de är tillgängliga för både mus- och tangentbordsanvändare. Detta innebär att verktygstipset ska visas både vid hover och när elementet får fokus.

HTML:

            <a href="#" aria-describedby="tooltip-example">Exempellänk</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Detta är ett exempel på ett verktygstips.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Säkerställ att verktygstipset ligger överst */
}

            

              
                Copy
              
            
          

Förklaring:

• aria-describedby: Detta attribut länkar länken till verktygstipselementet med hjälp av dess ID. Detta talar om för hjälpmedelsteknik att verktygstipset ger ytterligare information om länken.
• role="tooltip": Denna ARIA-roll identifierar elementet som ett verktygstips.
• CSS använder den intilliggande syskonselektorn (+) för att visa verktygstipset när länken hovras över eller fokuseras.

JavaScript (avancerad kontroll - valfritt):

Medan CSS kan hantera enkel visning/döljning, möjliggör JavaScript mer robust kontroll, särskilt när verktygstips genereras dynamiskt eller behöver mer komplext beteende.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. Använda ARIA-attribut

ARIA-attribut är avgörande för att ge semantisk information till hjälpmedelsteknik. Här är en genomgång av viktiga attribut:

• aria-describedby: Som nämnts tidigare etablerar detta attribut förhållandet mellan det utlösande elementet och verktygstipselementet.
• role="tooltip": Detta attribut definierar explicit elementet som ett verktygstips.
• aria-hidden="true"/aria-hidden="false": Använd dessa för att indikera om verktygstipset för närvarande är synligt för hjälpmedelsteknik. När verktygstipset är dolt, ställ in aria-hidden="true". När det är synligt, ställ in aria-hidden="false". Detta är särskilt viktigt när du använder JavaScript för att styra verktygstipsets synlighet.

Exempel:

            <button aria-describedby="help-tooltip">Skicka</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Klicka här för att skicka formuläret.</div>
            

              
                Copy
              
            
          

JavaScript (för aria-hidden):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Hantera fokus

När ett verktygstips visas ska det generellt sett *inte* stjäla fokus från det utlösande elementet. Fokus bör ligga kvar på elementet som utlöste verktygstipset. Detta säkerställer att tangentbordsanvändare kan fortsätta navigera på sidan utan oväntade avbrott.

Det kan dock finnas situationer där du *vill* flytta fokus till verktygstipset, särskilt om det innehåller interaktiva element (t.ex. länkar, knappar). I det här fallet, se till att:

• Verktygstipset är visuellt distinkt för att indikera att det har fokus.
• Det finns ett tydligt sätt att återföra fokus till det ursprungliga utlösande elementet (t.ex. en stängningsknapp i verktygstipset).

I de flesta fall är det att föredra att undvika fokushantering inom själva verktygstipset för enkelhetens och användbarhetens skull.

4. Säkerställa tillräcklig kontrast

Färgkontrast är avgörande för läsbarheten. Se till att textfärgen i dina verktygstips har tillräcklig kontrast mot bakgrundsfärgen. Web Content Accessibility Guidelines (WCAG) rekommenderar ett kontrastförhållande på minst 4.5:1 för normal text och 3:1 for stor text (18pt eller 14pt fet).

Använd onlineverktyg för kontrastkontroll för att verifiera att dina färgval uppfyller tillgänglighetsstandarder. Exempel på kontrastkontrollverktyg inkluderar:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Exempel (bra kontrast):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Exempel (dålig kontrast):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Ge tillräckligt med tid

Användare behöver tillräckligt med tid för att läsa innehållet i verktygstipset. Undvik verktygstips som försvinner för snabbt. Även om det inte finns något magiskt tal, sikta på en minsta visningstid på några sekunder. Dessutom bör verktygstipset förbli synligt så länge användaren hovrar över eller har fokuserat på det utlösande elementet. Om du behöver avvisa verktygstipset på grund av andra händelser, ge en indikation på att verktygstipset kommer att stängas.

Om innehållet i verktygstipset är långt, överväg att ge användaren ett sätt att manuellt avvisa det (t.ex. en stängningsknapp eller genom att trycka på Escape-tangenten).

6. Göra dem avvisningsbara

Även om verktygstips ofta försvinner automatiskt när användaren flyttar musen eller tar bort fokus, är det god praxis att tillhandahålla ett tydligt sätt att avvisa dem manuellt, särskilt för långa verktygstips eller sådana som innehåller interaktiva element.

Metoder för att avvisa verktygstips:

• Stängningsknapp: Inkludera en visuellt framträdande stängningsknapp i verktygstipset.
• Escape-tangenten: Låt användare avvisa verktygstipset genom att trycka på Escape-tangenten.
• Klicka utanför: Avvisa verktygstipset när användaren klickar någonstans utanför verktygstipset och det utlösande elementet. (Använd med försiktighet eftersom det kan vara störande).

Exempel (stängningsknapp):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  Detta är mitt verktygstipsinnehåll.
  <button onclick="hideTooltip()">Stäng</button>
</div>
            

              
                Copy
              
            
          

Exempel (Escape-tangenten):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Ersätt med din faktiska funktion för att dölja verktygstipset
  }
});

            

              
                Copy
              
            
          

7. Undvika överanvändning

Verktygstips bör användas sparsamt och endast när de ger verkligt användbar information. Överanvändning av verktygstips kan belamra gränssnittet, distrahera användare och skapa en frustrerande upplevelse.

Alternativ till verktygstips:

• Tydliga etiketter: Använd tydliga och beskrivande etiketter för formulärfält, knappar och länkar.
• Kontextuell hjälp: Tillhandahåll hjälptext direkt i gränssnittet, nära de relevanta elementen.
• Hjälpdokumentation: Länka till omfattande hjälpdokumentation för mer komplexa funktioner.

Avancerade överväganden

Dynamiskt innehåll

Om ditt verktygstipsinnehåll genereras dynamiskt (t.ex. laddas från ett API eller uppdateras baserat på användarinmatning), se till att aria-describedby-attributet och verktygstipsets synlighet uppdateras därefter. Använd JavaScript för att hantera dessa uppdateringar.

Positionering

Överväg noggrant positioneringen av dina verktygstips. Undvik att placera dem på ett sätt som skymmer viktigt innehåll eller orsakar layoutförskjutningar. Var medveten om olika skärmstorlekar och upplösningar, och använd CSS för att säkerställa att verktygstips alltid är synliga inom visningsområdet.

Mobila enheter

Verktygstips förlitar sig traditionellt på hover-interaktioner, vilka inte är tillgängliga på pekskärmsenheter. För mobila enheter, överväg att använda alternativa interaktionsmetoder, såsom:

• Tryck: Visa verktygstipset när användaren trycker på elementet.
• Långtryck: Visa verktygstipset när användaren gör ett långtryck på elementet.
• Visa vid fokus: Visa när elementet får fokus. Detta kan uppnås med JavaScript, genom att kontrollera för pekskärmsstöd (t.ex. `('ontouchstart' in window)`) och ändra visningsbeteendet därefter.

Testa dina verktygstips

Testa dina verktygstips noggrant för att säkerställa att de är tillgängliga för alla användare. Använd en kombination av manuell testning och automatiserade tillgänglighetstestverktyg.

Testmetoder:

• Tangentbordsnavigering: Verifiera att verktygstips är tillgängliga med tangentbordet.
• Skärmläsartestning: Använd en skärmläsare för att säkerställa att verktygstips läses upp korrekt.
• Färgkontrastanalys: Använd ett verktyg för färgkontrastkontroll för att verifiera tillräcklig kontrast.
• Mobiltestning: Testa verktygstips på olika mobila enheter och skärmstorlekar.
• Automatiserad tillgänglighetstestning: Använd verktyg som axe DevTools, WAVE eller Lighthouse för att identifiera potentiella tillgänglighetsproblem.

Internationalisering (i18n) och lokalisering (l10n)

När du utvecklar verktygstips för en global publik, ha internationalisering och lokalisering i åtanke:

• Textriktning: Stöd både vänster-till-höger (LTR) och höger-till-vänster (RTL) textriktningar. Använd logiska CSS-egenskaper (t.ex. `margin-inline-start`, `margin-inline-end`) istället för fysiska egenskaper (t.ex. `margin-left`, `margin-right`) för layout.
• Språkspecifika översättningar: Tillhandahåll översättningar av verktygstipsinnehåll för olika språk.
• Datum- och tidsformat: Anpassa datum- och tidsformat till användarens locale.
• Nummerformat: Använd lämpliga nummerformat för olika regioner (t.ex. decimalavgränsare, tusentalsavgränsare).

Slutsats

Att implementera tillgängliga verktygstips kräver noggrann planering och uppmärksamhet på detaljer. Genom att följa principerna och teknikerna som beskrivs i denna guide kan du skapa verktygstips som är användbara för alla, oavsett deras förmågor. Kom ihåg att tillgänglighet är en pågående process, så fortsätt att testa och förfina dina verktygstips för att säkerställa att de uppfyller behoven hos alla dina användare.

Resurser

• ARIA Authoring Practices Guide (APG) - Tooltip
• Web Content Accessibility Guidelines (WCAG) 2.1
• MDN Web Docs - ARIA